<!--
* description: 未提交计划门店明细
* author: wangml
* createdDate: 2020-12-01
-->

<template>
  <div class="app-container app-container-table">
    <!-- 单表格模版页面 -->
    <one-table-template
      ref="multipleTable"
      :dynamic-api-config="dynamicApiConfig"
      :dynamic-buttons="dynamicButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="dynamicTableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="true"
      :dynamic-is-show-select="false"
      :dynamic-api-style="apiStyle"
      :dynamic-page-size="15"
      :refresh-table-key="refreshTableKey"
      :callback-obj="callbackObj"
      @hiddenColData="hiddenColData"
    />

  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'
import api from '@/api/planReport'
import commData from '../common/index.js'
// import { requestRestful } from '@/api/commonRequest'

export default {
  name: 'NotSubmitStores',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      })
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      curPopupsVisible: false,
      genCodeFiled: null,
      selectList: [],
      clickRowsData: {},
      popstate: 'add',
      showdia: false,
      // 指定请求类型 可以统一在 utils/config.js中配置
      apiStyle: 'restful',
      dynamicApiConfig: api.notSubmitStoresDetail,
      refreshTableKey: '0',
      ruleSettingShow: false,
      // table表格查询API配置对象
      // 动态组件-查询条件
      tableComponents:
          this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents.length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
            : [
              ...commData.ModelOptions(2),
              // {
              //   compKey: 'comKey0',
              //   labelName: '车系名称：',
              //   codeField: 'carSeriesCn',
              //   component: () => import('../components/multipleSearchInput'),
              //   type: 'inputText',
              //   isMust: true,
              //   dataToObject: {
              //     // 控制弹窗页面 搜索 网格 元素
              //     tableComponents: [
              //       {
              //         compKey: 'compKey1',
              //         labelName: '车系编码：',
              //         codeField: 'vehicleCode',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       },
              //       {
              //         compKey: 'compKey2',
              //         labelName: '车系名称：',
              //         codeField: 'vehicleName',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       }
              //     ],
              //     tableCols: [
              //       {
              //         prop: 'carSeriesCode',
              //         label: '车系编码'
              //       },
              //       {
              //         prop: 'carSeriesCn',
              //         label: '车系名称'
              //       },
              //       {
              //         prop: 'carSeriesEn',
              //         label: '英文名称'
              //       },
              //       {
              //         prop: 'orderNo',
              //         label: '排列顺序'
              //       }
              //     ],
              //     formField: {
              //       carSeriesCode: '',
              //       carSeriesCn: ''
              //     },
              //     returnField: {
              //       prop: 'carSeriesCn',
              //       label: '车系名称'
              //     },
              //     api: api.vehicleQuery
              //   },
              //   span: 6
              // },
              // {
              //   compKey: 'comKey1',
              //   labelName: '车型名称：',
              //   codeField: 'carConfigCn',
              //   component: () => import('../components/multipleSearchInput'),
              //   type: 'inputText',
              //   isMust: true,
              //   dataToObject: {
              //     // 控制弹窗页面 搜索 网格 元素
              //     tableComponents: [
              //       {
              //         compKey: 'compKey1',
              //         labelName: '车型编码：',
              //         codeField: 'vehicleCode',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       },
              //       {
              //         compKey: 'compKey2',
              //         labelName: '车型名称：',
              //         codeField: 'vehicleName',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       }
              //     ],
              //     tableCols: [
              //       {
              //         prop: 'carConfigCode',
              //         label: '车型编码'
              //       },
              //       {
              //         prop: 'carConfigCn',
              //         label: '车型名称'
              //       },
              //       {
              //         prop: 'carSeriesCode',
              //         label: '车系编码'
              //       },
              //       {
              //         prop: 'carSeriesCn',
              //         label: '车系名称'
              //       }
              //     ],
              //     formField: {
              //       carConfigCode: '',
              //       carConfigCn: ''
              //     },
              //     returnField: {
              //       prop: 'carConfigCn',
              //       label: '车型名称'
              //     },
              //     api: api.ModelQuery
              //   },
              //   span: 6
              // },
              // {
              //   compKey: 'comKey5',
              //   labelName: '选装包：',
              //   codeField: 'optionalPagName',
              //   component: () => import('../components/multipleSearchInput'),
              //   type: 'inputText',
              //   dataToObject: {
              //     // 控制弹窗页面 搜索 网格 元素
              //     tableComponents: [
              //       {
              //         compKey: 'compKey1',
              //         labelName: '选装包编码：',
              //         codeField: 'packCode',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       },
              //       {
              //         compKey: 'compKey2',
              //         labelName: '选装包名称：',
              //         codeField: 'packName',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       }
              //     ],
              //     tableCols: [
              //       {
              //         prop: 'optionalPagCode',
              //         label: '选装包编码'
              //       },
              //       {
              //         prop: 'optionalPagName',
              //         label: '选装包名称'
              //       },
              //       {
              //         prop: 'optionalPrice',
              //         label: '价格'
              //       }
              //     ],
              //     formField: {
              //       optionalPagCode: '',
              //       optionalPagName: ''
              //     },
              //     returnField: {
              //       prop: 'optionalPagName',
              //       label: '选装包名称'
              //     },
              //     api: api.packQuery
              //   },
              //   isMust: true,
              //   span: 6
              // },
              // {
              //   compKey: 'comKey3',
              //   labelName: '车身颜色：',
              //   codeField: 'carColorName',
              //   component: () => import('../components/multipleSearchInput'),
              //   type: 'inputText',
              //   dataToObject: {
              //     // 控制弹窗页面 搜索 网格 元素
              //     tableComponents: [
              //       {
              //         compKey: 'compKey1',
              //         labelName: '车身颜色编码：',
              //         codeField: 'BodyColorCode',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       },
              //       {
              //         compKey: 'compKey2',
              //         labelName: '车身颜色名称：',
              //         codeField: 'BodyColorName',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       }
              //     ],
              //     tableCols: [
              //       {
              //         prop: 'carColorCode',
              //         label: '车身颜色编码'
              //       },
              //       {
              //         prop: 'carColorName',
              //         label: '车身颜色名称'
              //       },
              //       {
              //         prop: 'carColorPrice',
              //         label: '价格'
              //       }
              //     ],
              //     formField: {
              //       carColorCode: '',
              //       carColorName: ''
              //     },
              //     returnField: {
              //       prop: 'carColorName',
              //       label: '车身颜色名称'
              //     },
              //     api: api.bodyColorQuery
              //   },
              //   isMust: true,
              //   span: 6
              // },
              // {
              //   compKey: 'comKey4',
              //   labelName: '内饰颜色：',
              //   codeField: 'carInColorName',
              //   component: () => import('../components/multipleSearchInput'),
              //   type: 'inputText',
              //   dataToObject: {
              //     // 控制弹窗页面 搜索 网格 元素
              //     tableComponents: [
              //       {
              //         compKey: 'compKey1',
              //         labelName: '内饰颜色编码：',
              //         codeField: 'BodyColorCode',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       },
              //       {
              //         compKey: 'compKey2',
              //         labelName: '内饰颜色名称：',
              //         codeField: 'BodyColorName',
              //         component: () => import('@/components/org/commonInput'),
              //         type: 'inputText',
              //         isMust: true,
              //         span: 8
              //       }
              //     ],
              //     tableCols: [
              //       {
              //         prop: 'carIncolorCode',
              //         label: '内饰颜色编码'
              //       },
              //       {
              //         prop: 'carIncolorName',
              //         label: '内饰颜色名称'
              //       },
              //       {
              //         prop: 'carIncolorPrice',
              //         label: '价格'
              //       }
              //     ],
              //     formField: {
              //       carInColorCode: '',
              //       carInColorName: ''
              //     },
              //     returnField: {
              //       prop: 'carIncolorName',
              //       label: '内饰颜色名称'
              //     },
              //     api: api.innerColorQuery
              //   },
              //   isMust: false,
              //   span: 6
              // },
              {
                compKey: 'comKey6',
                labelName: '制定月份：',
                codeField: 'makingMonth',
                component: () => import('@/components/org/datePicker/datePicker.vue'),
                dateType: 'month',
                format: 'yyyy-MM',
                dateOptionsType: '3',
                isMust: false,
                span: 6
              },
              {
                compKey: 'comKey7',
                labelName: '计划月份：',
                codeField: 'planMonth',
                component: () => import('@/components/org/datePicker/datePicker.vue'),
                dateType: 'month',
                format: 'yyyy-MM',
                dateOptionsType: '3',
                // disabled: true,
                // parentFileds: 'disabled:FormulationMonth-PlanMonth--false',
                // type: 'inputText',
                isMust: false,
                span: 6
              },
              {
                compKey: 'comKey8',
                labelName: '门店名称：',
                codeField: 'dlrShortName',
                component: () => import('../components/multipleSearchInput'),
                type: 'inputText',
                dataToObject: {
                  // 控制弹窗页面 搜索 网格 元素
                  tableComponents: [
                    {
                      compKey: 'compKey1',
                      labelName: '门店编码：',
                      codeField: 'dlrCode',
                      component: () => import('@/components/org/commonInput'),
                      type: 'inputText',
                      isMust: true,
                      span: 8
                    },
                    {
                      compKey: 'compKey2',
                      labelName: '门店名称：',
                      codeField: 'dlrShortName',
                      component: () => import('@/components/org/commonInput'),
                      type: 'inputText',
                      isMust: true,
                      span: 8
                    }
                  ],
                  tableCols: [
                    {
                      prop: 'dlrCode',
                      label: '门店编码'
                    },
                    {
                      prop: 'dlrShortName',
                      label: '门店名称'
                    }
                  ],
                  formField: {
                    dlrCode: '',
                    dlrShortName: ''
                  },
                  returnField: {
                    prop: 'dlrShortName',
                    label: '门店名称'
                  },
                  api: api.dlrQuery
                },
                isMust: false,
                span: 6
              }

            ],
      formField: null,
      // 动态组件-按钮
      dynamicButtons: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
        : [
          {
            compKey: 'comKey1',
            type: 'primary',
            size: 'small',
            name: 'search',
            position: 'right',
            clickEvent: () => this.queryTable(),
            text: '查询'
          },
          {
            compKey: 'comKey0',
            type: '',
            size: 'small',
            name: 'reset',
            position: 'right',
            clickEvent: () => this.reset(),
            text: '重置'
          },
          {
            compKey: 'comKey2',
            type: '',
            size: 'small',
            name: 'export',
            position: 'left',
            clickEvent: () => this.expot(),
            text: '导出'
          }

        ],
      // 动态组件-表格网格列
      dynamicTableCols: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
        : [
          {
            prop: 'releaseId',
            label: '主键ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'updateControlId',
            label: '并发控制ID',
            hidden: true,
            alwaysHidden: true
          },
          // {
          //   prop: 'planStatus',
          //   label: '状态'
          // },
          {
            prop: 'makingMonth',
            label: '制定月份'
          },
          {
            prop: 'endDate',
            label: '制定截止日期'
          },
          {
            prop: 'ttCode',
            label: '22位码'
          },
          {
            prop: 'planMonth',
            label: '计划月份'
          },
          {
            prop: 'dlrCode',
            label: '门店编码'
          },
          {
            prop: 'dlrShortName',
            label: '门店名称'
          },
          {
            prop: 'carSeriesCode',
            label: '车系编码'
          },
          {
            prop: 'carSeriesCn',
            label: '车系名称'
          },
          {
            prop: 'carConfigCode',
            label: '基础车型编码'
          },
          {
            prop: 'carConfigCn',
            label: '基础车型名称',
            width: 110
          },
          {
            prop: 'optionalPagCode',
            label: '选装包编码'
          },
          {
            prop: 'optionalPagName',
            label: '选装包名称'
          },
          {
            prop: 'carColorCode',
            label: '车身颜色编码'
          },
          {
            prop: 'carColorName',
            label: '车身颜色名称'
          },
          {
            prop: 'carInColorCode',
            label: '内饰颜色编码'
          },
          {
            prop: 'carInColorName',
            label: '内饰颜色名称'
          },
          {
            prop: 'creator',
            label: '制作人'
          },
          {
            prop: 'createdDate',
            label: '创建时间'
          },
          {
            prop: 'publishTime',
            label: '发布时间'
          }
        ],
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.selectList = selection
          this.handleSelectionChange(selection)
        }
      }
    }
  },
  created() {
    const viewPageCode = this.$route.path
    this.genCodeFiled = this.genUtil(this.tableComponents)
    const formField = this.genCodeFiled('codeField')
    this.formField = this.$utils.getFormField(this, formField, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
  },
  mounted() {
    // 列表查询
    this.queryTable(1)
  },
  methods: {
    handle() { },
    expot() {
      // fileName -> 选装包维护20201222181629.xlsx
      const title = this.$route.matched[this.$route.matched.length - 1].meta.title.replace('/', '')
      const fileSuffix = this.$config.excelExp
      const fileName = this.$utils.fileNameWithTime(`${title}${fileSuffix}`)
      this.$requestAPI({
        apiUrl: api.notSubmitStoresExport.APIUrl,
        variables: { ...this.formField, dataType: 'excel' }
      }).then(res => {
        this.$utils.downloadFile(res, fileName)
      }).catch(err => {
        console.log(err)
      })
    },
    // 自动生成codeField
    genUtil: (array) => (attr) => array.reduce((p, c) => { p[c[attr]] = ''; return p }, {}),
    // 保存 或新增 后会调用此方法
    popClose(type) {
      this.showdia = false
      if (type == 1) {
        this.queryTable(1)
      }
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.dynamicButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    },

    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1
        this.dynamicTableCols = data
      }
    },

    // 新增
    // add() {
    //   this.clickRowsData = {}
    //   this.popstate = 'add'
    //   this.showdia = true
    // },
    selectRowsData(rowdata) {

    },

    // 查看附件
    checkFile(index, type) {
      // location.href = process.env.VUE_APP_BASE_API + this.$refs['multipleTable'].list[index].downloadUrl
      window.open(this.$refs['multipleTable'].list[index][type])
    },

    // 删除按钮单条删除
    delOneData(row) {
      const data = [this.$refs['multipleTable'].list[row]]
      this.delData(data)
    },

    // 数据批量删除
    delSeleteData() {
      const data = this.$refs['multipleTable'].$refs['multipleTable'].selection
      this.delData(data)
    },

    // 删除
    delData(selectData) {
      const that = this
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // requestRestful({
        //   apiUrl: '',
        //   variables: {},
        //   method: 'POST', // 默认post
        //   contentType: '', // 默认 'application/json; charset=UTF-8'
        //   lock: '',
        //   urlType: 'GET' // 处理非json请求
        // })
      }).catch(() => {})
    }
  }
}
</script>

